/**
 * Created with hong.rong
 * Date:2020/07/05
 */

import React, { useState, Fragment } from 'react'
import { isFunction } from 'lodash'
import { Modal, Form, Input, InputNumber, Radio, message } from 'antd'
import { CategoryWrapper, LevelFirst, LevelSecond } from '../LevelSelect/index'
import { categoryModify } from '@/services/config/category'
import { CATEGORY_LEVEL } from '@/constant/category'

const TYPE = {
  CREATE: {
    LABEL: '新增类目',
    VALUE: 'CREATE',
  },
  EDIT: {
    LABEL: '编辑类目',
    VALUE: 'EDIT',
  },
}

const labelWidth = 90

export default function Modify({ children, refreshList }) {
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  // const [current, setCurrent] = useState({})
  const [modalType, setModalType] = useState(null)
  const [form] = Form.useForm()

  /**
   * 提交
   */
  const handleOk = () => {
    form.validateFields().then(async values => {
      setConfirmLoading(true)
      const { data = {} } = await categoryModify(values)
      if (data && data.code === 0) {
        message.success('保存成功')
        handleCancel()
        isFunction(refreshList) && refreshList()
      } else {
        handleCancel()
      }
    })
  }
  /**
   * 显示弹框
   * @type {*|Function}
   */
  const handleShow = (modalType, current) => {
    if (modalType === TYPE.EDIT.VALUE) {
      // setCurrent(current)
      form.setFieldsValue(current)
    }
    setModalType(modalType)
    setVisible(true)
  }
  /**
   * 取消弹框
   * @type {*|Function}
   */
  const handleCancel = () => {
    setVisible(false)
    setConfirmLoading(false)
    // setCurrent({})
    setModalType(null)
    form.resetFields()
  }

  return (
    <Fragment>
      {isFunction(children) && children(handleShow)}
      <Modal
        destroyOnClose
        title={(TYPE[modalType] || {}).LABEL}
        visible={visible}
        confirmLoading={confirmLoading}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form labelAlign="left" form={form}>
          <Form.Item
            label="类目名称"
            name="title"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          {modalType === TYPE.EDIT.VALUE && (
            <Form.Item name="cateId" noStyle>
              <Input type="hidden" />
            </Form.Item>
          )}
          <Form.Item
            label="类目层级"
            name="cateLevel"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Radio.Group>
              <Radio value={CATEGORY_LEVEL.ONE}>一级</Radio>
              <Radio value={CATEGORY_LEVEL.TWO}>二级</Radio>
              <Radio value={CATEGORY_LEVEL.THREE}>三级</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="有无子类目"
            name="leaf"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <Radio.Group>
              <Radio value={1}>是</Radio>
              <Radio value={0}>否</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) =>
              prevValues.cateLevel !== currentValues.cateLevel
            }
          >
            {({ getFieldValue }) => {
              const cateLevel = getFieldValue('cateLevel')
              switch (cateLevel) {
                case CATEGORY_LEVEL.TWO:
                  return (
                    <CategoryWrapper>
                      <Form.Item
                        label="一级类目"
                        name="oneId"
                        rules={[{ required: true }]}
                        qql-form-label-width={labelWidth}
                      >
                        <LevelFirst />
                      </Form.Item>
                    </CategoryWrapper>
                  )
                case CATEGORY_LEVEL.THREE:
                  return (
                    <CategoryWrapper>
                      <Form.Item
                        label="一级类目"
                        name="oneId"
                        rules={[{ required: true }]}
                        qql-form-label-width={labelWidth}
                      >
                        <LevelFirst />
                      </Form.Item>
                      <Form.Item
                        label="二级类目"
                        name="twoId"
                        rules={[{ required: true }]}
                        qql-form-label-width={labelWidth}
                      >
                        <LevelSecond />
                      </Form.Item>
                    </CategoryWrapper>
                  )
                default:
                  break
              }
            }}
          </Form.Item>
          <Form.Item
            label="类目排序"
            name="orderSeq"
            rules={[{ required: true }]}
            qql-form-label-width={labelWidth}
          >
            <InputNumber
              style={{ width: '100%' }}
              precision={0}
              min={1}
              placeholder="请输入"
            />
          </Form.Item>
          <Form.Item
            label="扩展字段"
            name="feature"
            qql-form-label-width={labelWidth}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>
    </Fragment>
  )
}
Modify.TYPE = TYPE
